import React, { useState } from 'react';
import { Button, Flex, Divider, List, Typography, Input } from 'antd';
import { getObject, uploadMultiFile, toast } from "@/service/common";


interface ApplicationProps {
    license: string;
    url: string;
}

const Application: React.FC<ApplicationProps> = ({ license, url }) => {
    const [jars, setJars] = useState([])
    const [updateJars, setUpdateJars] = useState<File[]>([])

    const getJars = () => {
        setJars([]) // 清空之前的列表
        setUpdateJars([]);
        getObject({ url: `${url}/fw/ytcheck/delpoy/jar_list/${license}` })
            .then(({ data }) => {
                if (Array.isArray(data)) {
                    setJars(data);
                    toast.success('获取jar列表成功');
                }
            })
    }

    const handleUpdate = () => {
        if (updateJars.length === 0) {
            return;
        }
        // 处理更新逻辑
        const formData = new FormData();
        updateJars.forEach((file) => {
            formData.append('files', file);
        });
        formData.append('exist', "true");
        toast.loading()
        uploadMultiFile({ url: `${url}/fw/ytcheck/delpoy/upate/jar/${license}`, data: formData })
            .then(() => {
                // 更新成功后，重新获取应用列表
                getJars();
                // 清空已选择的文件
                toast.success('更新成功');
            }).finally(() => {
                toast.loading_close()
            })

    }

    function handleButtonClick() {
        // 创建 input 元素
        const input = document.createElement('input');
        input.type = 'file';
        input.accept = '.jar';
        input.multiple = true; // 如果只允许选择一个文件，可以设置为 false
        input.onchange = (e: Event) => {
            const target = e.target as HTMLInputElement;
            const files = target.files;
            if (files && files.length > 0) {
                const selectedFiles = Array.from(files);
                setUpdateJars(selectedFiles); // 更新状态以显示选择的文件
            }
        };
        // 触发文件选择框
        input.click();
    }
    const handleRestart = () => {
        toast.loading()
        getObject({ url: `${url}/fw/ytcheck/delpoy/start/${license}` })
            .then(() => {
                toast.success('重启成功');
            })
            .finally(() => {
                toast.loading_close()
            })
    }
    return (
        <div>
            <List
                header={<div className='flex flex-col gap-2'>
                    <div className='flex gap-2'>
                        <Button color="primary" variant="solid" onClick={getJars}>获取jar列表</Button>

                    </div>
                    <div className='flex gap-2'>
                        <Button color="default" variant="solid" onClick={handleButtonClick}>选择jar</Button>
                        <Button color="purple" variant="solid" onClick={handleUpdate}>上传jar</Button>
                        <Button color="yellow" variant="solid" onClick={handleRestart}>重启</Button>
                    </div>
                    <div>
                        {updateJars.length > 0 && (
                            <div className='flex flex-col gap-2'>
                                {updateJars.map((file, index) => (
                                    <Typography.Text key={index} mark>{file.name}</Typography.Text>
                                ))}
                            </div>
                        )}
                    </div>
                </div>}
                bordered
                dataSource={jars}
                renderItem={(item) => (
                    <List.Item>
                        <Typography.Text >{item['文件名']}</Typography.Text>  {/* 使用 mark 来突出显示文件名 */}
                        <Divider type="vertical" />
                        <Typography.Text >{item['修改时间']}</Typography.Text>

                        {/* <Typography.Text mark>[ITEM]</Typography.Text> {item} */}
                    </List.Item>
                )}
            />
        </div>
    );
};

export default Application;